<template>
  <div class="app-container" >
    <el-form ref="form" :model="form" label-width="150px" style="width: 100%" inline="true" align="center">

        <el-form-item label="工程部位">
            <el-input v-model="form.name"  ></el-input>
          </el-form-item >

        <el-form-item label="混凝土方量">
            <el-input v-model="form.size" placeholder="单位立方米" style="width: 120px"></el-input>
          </el-form-item >


        <el-form-item label="水泥(含水率%)">
          <el-input v-model="form.shuini" placeholder="100范围内" style="width: 120px"></el-input>
        </el-form-item >
        
        <el-form-item label="大石(含水率%)" >
            <el-input v-model="form.dashi"  style="width: 120px"></el-input>
          </el-form-item>
          
          <el-form-item label="中石(含水率%)">
            <el-input v-model="form.zhongshi" style="width: 120px"></el-input>
          </el-form-item>
          
          <el-form-item label="小石(含水率%)">
            <el-input v-model="form.xiaoshi" style="width: 120px"></el-input>
          </el-form-item>
          
          <el-form-item label="砂(含水率%)">
            <el-input v-model="form.sha" style="width: 120px"></el-input>
          </el-form-item>
          
          <el-form-item label="外加剂(含水率%)">
            <el-input v-model="form.waijia" style="width: 120px"></el-input>
          </el-form-item>

         <el-form-item label="混凝土标号">
          <el-select v-model="form.region" placeholder="请选择"  >
            <!-- <el-option label="C15" value="15"></el-option> -->
            <el-option label="C20" value="20"></el-option>
            <el-option label="C25" value="25"></el-option>
            <el-option label="C30" value="30"></el-option>
            <el-option label="C35" value="35"></el-option>
            <el-option label="C40" value="40"></el-option>
            <!-- <el-option label="C45" value="45"></el-option>
            <el-option label="C50" value="50"></el-option>
            <el-option label="C55" value="55"></el-option>
            <el-option label="C60" value="60"></el-option> -->
          </el-select>
        </el-form-item>


        <br>

        <el-form-item label="水泥" >
            <el-input v-model="form.shuini1" style="width: 120px" disabled="true"></el-input>
          </el-form-item >
          
          <el-form-item label="大石" >
              <el-input v-model="form.dashi1"  style="width: 120px" disabled="true"></el-input>
            </el-form-item>
            
            <el-form-item label="中石">
              <el-input v-model="form.zhongshi1" style="width: 120px" disabled="true"></el-input>
            </el-form-item>
            
            <el-form-item label="小石">
              <el-input v-model="form.xiaoshi1" style="width: 120px" disabled="true"></el-input>
            </el-form-item>
            
            <el-form-item label="砂">
              <el-input v-model="form.sha1" style="width: 120px" disabled="true"></el-input>
            </el-form-item>
            
            <el-form-item label="外加剂" >
              <el-input v-model="form.waijia1" :disabled="true" ></el-input>
            </el-form-item>

            <!-- 材料占比 -->
            <br>
            <el-form-item label="水泥(%)" >
                <el-input v-model="form.shuini2" style="width: 120px" disabled="true"></el-input>
              </el-form-item >
              
              <el-form-item label="大石(%)" >
                  <el-input v-model="form.dashi2"  style="width: 120px" disabled="true"></el-input>
                </el-form-item>
                
                <el-form-item label="中石(%)">
                  <el-input v-model="form.zhongshi2" style="width: 120px" disabled="true"></el-input>
                </el-form-item>
                
                <el-form-item label="小石(%)">
                  <el-input v-model="form.xiaoshi2" style="width: 120px" disabled="true"></el-input>
                </el-form-item>
                
                <el-form-item label="砂(%)">
                  <el-input v-model="form.sha2" style="width: 120px" disabled="true"></el-input>
                </el-form-item>
                
                <el-form-item label="外加剂(%)" >
                  <el-input v-model="form.waijia2" :disabled="true" ></el-input>
                </el-form-item>
        
       
            <br>
          <el-button type="primary" @click="onSubmit" >立即创建</el-button>
          <el-button type="primary" @click="del">取消</el-button>
        </el-form-item>
        
      </el-form>

      <div class="chart-container" v-if="form.region!=''"  >       
        <div id="chart" class="chart" style="height:1000px;width:100%" />
      </div>

      
    </div>

      

      
      
      


</template>


<script>
    import hn from '@/api/hunning'
    import * as echarts from 'echarts';
    import {L2Dwidget} from 'live2d-widget'
    export default {
      data() {
        return {
          form: {
            shuini:"",
            dashi:'',
            zhongshi:"",
            xiaoshi:"",
            sha:'',
            waijia:'',
            region:'',
            size:'',

            shuini1:"",
            dashi1:'',
            zhongshi1:"",
            xiaoshi1:"",
            sha1:'',
            waijia1:'',

            shuini2:"",
            dashi2:'',
            zhongshi2:"",
            xiaoshi2:"",
            sha2:'',
            waijia2:'',

          }
        }
      },
      created(){

        setTimeout(function () {
            L2Dwidget.init({
                model: {
                    jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-koharu/assets/koharu.model.json',
                }
                });
            },1000);
          
        },
      methods: {
        onSubmit() {
            hn.addhunning(this.form)
              .then(response => {//添加成功
                this.form=response.data.hunning
                
              
          //提示信息
          this.$message({
              type: 'success',
              message: '添加成功!'
          });
          this.setChart()
          
          
          
          
          //回到列表页面 路由跳转
        //   this.$router.push({path:'/app/shuju'})
            })
            
          },
          del(){
              this.form={
                region:""
              }
          },

          

          setChart() {
            // 基于准备好的dom，初始化echarts实例
            this.chart = echarts.init(document.getElementById('chart'))
            // console.log(this.chart)
            
            console.log(this.form.shuini1)
            
            // 指定图表的配置项和数据
            var option = {
                title : {
                    text: '材料比例',
                    subtext: '',
                    x:'center',
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['水泥','大石','中石','小石','砂','外加剂']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:this.form.shuini1, name:'水泥'},
                            {value:this.form.dashi1, name:'大石'},
                            {value:this.form.zhongshi1, name:'中石'},
                            {value:this.form.xiaoshi1, name:'小石'},
                            {value:this.form.sha1, name:'砂'},
                            {value:this.form.waijia1, name:'外加剂'}
                        ]
                    }
                ]
            };
              
                    

            this.chart.setOption(option)
        }


        
          
        }
      }
</script>    